<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/swiper.css" />
<link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<style>
	.swiper-pagination-bullet {
		background: none;
		border: 1px solid #FFF;
		opacity: 1;
	}
	.swiper-pagination-bullet-active {
		background: #FFF;
	}
	.swiper-container-horizontal > .swiper-pagination-bullets {
		bottom: 3px;
	}

	.notice {
		padding: 0 0.5rem 1rem;
	}
	.notice ul {
		height: 1.6rem;
		position: relative;
	}
	.notice ul li {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		-webkit-transition: all 0.8s ease;
		transition: all 0.8s ease;
	}
	.notice ul li.scroll {
		opacity: 0;
		/* -webkit-transform: translateY(-120%);
		transform: translateY(-120%); */
	}
	.notice .item {
		height: 100%;
		background: #010101;
		color: #FFF;
		border-radius: 0.8rem;
		padding: 0 1.3rem 0 1rem;
		font-size: 0.6rem;
	}
	.notice .ico {
		width: 3rem;
		height: 100%;
		background-repeat: no-repeat;
		background-position: left center;
		background-size: auto 0.75rem;
	}
	.notice .ico_1 {
		background-image: url(../image/best/01.png);
	}
	.notice .ico_2 {
		background-image: url(../image/best/02.png);
	}
	.notice .ico_3 {
		background-image: url(../image/best/03.png);
	}
	.notice .ico_4 {
		background-image: url(../image/best/04.png);
	}
	.notice .ico_5 {
		background-image: url(../image/best/05.png);
	}
	.notice .avatar {
		width: 1rem;
	}
	.notice .txt {
		padding: 0 0.5rem;
	}
	.notice .time {
		color: #ADADAD;
		font-size: 0.5rem;
	}
	.notice .item:before {
		right: 0.75rem;
		border-color: #ADADAD;
	}
	.shadow {
		margin-bottom: 0.5rem;
	}
	.comFlowBox {
		padding: 0.6rem 0.5rem;
	}
	.giftBox {
		background: #FFF;
		padding: 0.25rem 0;
		margin-bottom: 0.5rem;
	}
	.singleBanner {
		padding: 0.25rem 0;
	}
	.bannerSlider .swiper-slide {
		border-radius: 0.25rem;
		overflow: hidden;
		width: 90%;
	}
	.giftList {
		margin: 10px 9px 0;
	}
	.giftList li {
		float: left;
		width: 25%;
		padding: 1px;
	}
	.giftList li.wide {
		width: 50%;
	}
	.giftList li img {
		width: 100%;
		height: auto;
	}
</style>
</head>
<body class="bg-f5">
	<div class="bg-white shadow">
		<div class="swiper-container" id="mainImg">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="../image/index/main_img01.png" width="100%" alt=""></div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<script type="text/x-dot-template" id="slider_tpl">
		{{ for(var i in it) { }}
			<div class="swiper-slide" tapmode onClick="openSubject({{= it[i].special_id }});"><img src="{{= it[i].special_cover }}" width="100%" alt=""></div>
		{{ } }}
		</script>
		<div class="hotMap">
			<ul class="aui-flex-col" id="hotmap_html">
				<!-- <li tapmode onClick="openSubject(1);">
					<div class="ico"><img src="../image/index/icon01.png" alt=""></div>
					<div class="txt">求种草</div>
				</li>
				<li tapmode onClick="openSubject(2);">
					<div class="ico"><img src="../image/index/icon02.png" alt=""></div>
					<div class="txt">招商礼包</div>
				</li>
				<li tapmode onClick="openSubject();">
					<div class="ico"><img src="../image/index/icon03.png" alt=""></div>
					<div class="txt">1元包邮</div>
				</li>
				<li tapmode onClick="openSubject();">
					<div class="ico"><img src="../image/index/icon04.png" alt=""></div>
					<div class="txt">当季热卖</div>
				</li>
				<li tapmode onClick="openSubject();">
					<div class="ico"><img src="../image/index/icon05.png" alt=""></div>
					<div class="txt">新手课堂</div>
				</li> -->
			</ul>
		</div>
		<script type="text/x-dot-template" id="hotmap_tpl">
		{{ for(var i in it) { }}
			<li tapmode onClick="openSubject({{= it[i].special_id }});">
				<div class="ico"><img src="{{= it[i].special_cover }}" alt=""></div>
				<div class="txt">{{= it[i].special_title }}</div>
			</li>
		{{ } }}
		</script>
		<div class="notice aui-hide">
			<ul id="notice_html">
				<!-- <li>
					<div class="item right-arrow aui-flex-col aui-flex-middle" data-type="升级">
						<div class="ico ico_5"></div>
						<div><div class="avatar"><img src="../image/demo/02.jpg" alt=""></div></div>
						<div class="flex-auto txt aui-ellipsis-1">恭喜露***由VIP升级到了运营商！</div>
						<div class="time">20分钟前</div>
					</div>
				</li> -->
			</ul>
		</div>
    </div>
    <script type="text/x-dot-template" id="notice_tpl">
    {{ for(var i in it) { }}
    <li>
        <div class="item right-arrow aui-flex-col aui-flex-middle">
            <div class="ico ico_{{= it[i].msg_type }}"></div>
            <div><div class="avatar"><img src="{{= it[i].msg_title || '' }}" alt=""></div></div>
            <div class="flex-auto txt aui-ellipsis-1">{{= it[i].msg_content || '' }}</div>
            <div class="time">{{= it[i].time }}</div>
        </div>
    </li>
    {{ } }}
    </script>
	<div class="giftBox">
		<div class="singleBanner" tapmode onClick="openGift();"><img src="../image/index/banner01.jpg" alt=""></div>
	</div>
	<div class="giftBox">
		<div class="todayTitle"><img src="../image/index/title01.jpg" alt=""></div>
		<div class="singleBanner" tapmode onClick="testOpenDetail(this);"><img src="../image/index/item01.jpg" alt=""></div>
		<div class="singleBanner" tapmode onClick="testOpenDetail(this);"><img src="../image/index/item02.jpg" alt=""></div>
		<div class="singleBanner" tapmode onClick="testOpenDetail(this);"><img src="../image/index/item03.jpg" alt=""></div>
		<div class="singleBanner" tapmode onClick="testOpenDetail(this);"><img src="../image/index/item04.jpg" alt=""></div>
		<div class="singleBanner" tapmode onClick="testOpenDetail(this);"><img src="../image/index/item05.jpg" alt=""></div>
		<div class="singleBanner" tapmode onClick="testOpenDetail(this);"><img src="../image/index/item06.jpg" alt=""></div>
		<div class="moreBtn" tapmode onclick="openSelf();"><img src="../image/index/more.jpg" alt=""></div>
	</div>
	<div class="giftBox">
		<div class="todayTitle"><img src="../image/index/title02.jpg" alt=""></div>
		<ul class="giftList aui-flex-col">
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon01.jpg" alt=""></div></li>
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon02.jpg" alt=""></div></li>
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon03.jpg" alt=""></div></li>
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon04.jpg" alt=""></div></li>
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon05.jpg" alt=""></div></li>
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon06.jpg" alt=""></div></li>
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon07.jpg" alt=""></div></li>
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon08.jpg" alt=""></div></li>
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon09.jpg" alt=""></div></li>
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon10.jpg" alt=""></div></li>
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon11.jpg" alt=""></div></li>
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon12.jpg" alt=""></div></li>
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon13.jpg" alt=""></div></li>
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon14.jpg" alt=""></div></li>
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon15.jpg" alt=""></div></li>
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon16.jpg" alt=""></div></li>
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon17.jpg" alt=""></div></li>
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon18.jpg" alt=""></div></li>
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon19.jpg" alt=""></div></li>
			<li tapmode onClick="testOpenDetail(this);"><div><img src="../image/index/coupon20.jpg" alt=""></div></li>
		</ul>
		<div class="moreBtn"><img src="../image/index/more.jpg" alt=""></div>
	</div>
	<div class="todayTitle"><img src="../image/index/title03.jpg" alt=""></div>
	<div class="comFlowBox">
		<div class="comGodList" id="flow_html">
			<div class="grid-sizer"></div>

		</div>
	</div>

	<ul id="list" style="display:flex; flex-wrap:wrap; padding:0 6px">
		<li style="flex-basis:50%; width:50%; box-sizing:border-box; padding:12px 6px; background:#fff" v-for="(item,index) in list" @click="share(item)">
			<img :src="item.pict_url" />
			<div style="padding-top:6px;height:30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" v-text="item.short_title"></div>
			<div style="padding-top:6px;display:flex;  justify-content: space-between;align-items:center;">
				<div>
						<strong style="color:#f00" v-text="'佣金：'+item.data_amount"></strong>
						<p style="color:#999" v-text="'到手价：'+item.zk_final_price"></p>
				</div>
				<div>
					<span>立即分享</span>
				</div>
			</div>
		</li>
	</ul>

	<script type="text/x-dot-template" id="flow_tpls">
		{{ for(var i in it){ }}
		{{ if(it[i].title){ }}
		<div class="item" data-id="{{= it[i].shop_id}}" tapmode onClick="openProductDetail({{= it[i].shop_id}});">
            <div class="inner">
                {{ if(it[i].data_amount && getUserVip()>1 ){ }}
                <div class="earn">赚￥{{= it[i].data_amount}}</div>
                {{ } }}
                <div class="photo"><img src="{{= it[i].pict_url}}" alt=""></div>
                <div class="textBox">
                    <div class="title aui-flex-col aui-flex-middle">
                        <div class="aui-ellipsis-2"><span class="tag">{{= it[i].user_type }}</span>{{= it[i].title }}</div>
                    </div>
                    <div class="aui-flex-col aui-flex-middle priceBox">
                        <div class="nowPrice">¥{{= it[i].coupon_amount }}</div>
                        <div class="delPrice">¥<del>{{= it[i].zk_final_price }}</del></div>
                    </div>
                    <div class="aui-flex-col aui-flex-middle aui-flex-between">
                        {{ if( it[i].coupon_info ){ }}
                        <dl class="quan outline aui-flex-col aui-flex-middle">
                            <dt>券</dt>
                            <dd>{{= it[i].coupon_info }}元</dd>
                        </dl>
                        {{ }else{ }}
                        <div></div>
                        {{ } }}
                        <div class="sale">月销 {{= it[i].volume }}件</div>
                    </div>
                </div>
            </div>
		</div>
		{{ } }}
		{{ } }}
    </script>


</body>
<script type="text/javascript" src="../script/import.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/swiper.min.js"></script>
<script type="text/javascript" src="../script/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="../script/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
var isinerval;
var PARAM_INFO;
var CAT_ID,SUB_CAT_ID;
var gridDom = '#flow_html';
var grid;
var isLoading = false;
var loadFlag = true;
var pageSize = 50;
var currentPage = 1;
var postData = {
	pageSize: pageSize
};
apiready = function(){
	api.parseTapmode();
	PARAM_INFO = api.pageParam;

	if(getUserId()){
		postData.userid = getUserId();
	}
	showPage();


	var vm = new Vue({
		el:'#list',
		data:{
			list:[],
			userInfo:{}
		},
		mounted(){
			this.getList()
			this.userInfo = getUserinfo()
			console.log(JSON.stringify(this.userInfo))
		},
		methods:{

			getList(){
				let _this = this
				api.ajax({
				    url: BASE_URL + 'app/topic/zhuye',
				    method: 'get',
				    data: {
				        values: {
				            name: 'haha'
				        }
				    }
				},function(ret, err){
					console.log(JSON.stringify(ret))
					_this.list = ret
				});

			},
			toDetail(godId,item,img){
				api.openWin({
					name: 'product_detail_win',
					url: 'widget://html/best/product_detail_win.html',
					pageParam: {
						shopId: godId,
						item:item,
						img:img
					}
				});
			},
			share(item){
				let _this = this
				api.ajax({
				    url: BASE_URL + 'app/user/makesharelist',
				    method: 'post',
				    data: {
				        values: {
				            userid: _this.userInfo.userid,
										ordertype:3,
										orderid:item.num_iid
				        }
				    }
				},function(ret, err){
					console.log(JSON.stringify(ret))
					// return
				    // if (ret) {
				    //     alert( JSON.stringify( ret ) );
				    // } else {
				    //     alert( JSON.stringify( err ) );
				    // }
				});

				api.ajax({
				    url: BASE_URL + 'app/select/shareImg',
				    method: 'post',
				    data: {
				        values: {
										pict_url:item.pict_url,
										title: item.title,
										price:item.coupon_amount,
										original_price:item.reserve_price,
										coupon_price:item.coupon_info,
										user_nickname: _this.userInfo.user_nickname,
										coupon_share_url:item.coupon_share_url,
										type:2
										// type:item.user_type
				        }
				    }
				},function(ret, err){
						_this.toDetail(item.num_iid,item,ret.img)
				});
				return
				api.ajax({
				    url: BASE_URL + 'app/select/modelGenerate',
				    method: 'post',
				    data: {
				        values: {
				            coupon_share_url : item.coupon_share_url,
										pict_url:item.pict_url,
										user_nickname: _this.userInfo.user_nickname,
										shot_title:item.title,
										userid:_this.userInfo.userid,
										ordertype:3
				        }
				    }
				},function(ret, err){
				    // if (ret) {
				    //     alert( JSON.stringify( ret ) );
				    // } else {
				    //     alert( JSON.stringify( err ) );
				    // }
				});

			}
		},
	})

	// 监听到达底部
	api.addEventListener({
	  name:'scrolltobottom',
	  extra:{
		  threshold: 0
	  }
	}, function(ret, err){
		if(isLoading)return;
		if(loadFlag){
			getData();
		}
	});
	//登录成功后 刷新数据
	api.addEventListener({
		name: 'loginSuccessEvent'
	}, function(ret, err){
		loadFlag = true;
		currentPage = 1;
		postData.userid = getUserId();
		getData();
	});
};
function showPage(){
	getSubjectData(1);		//顶部轮播
	getSubjectData(2);		//icon推荐位
	checkHotMapLen();	//
    getNoticeData();
    setInterval("getNoticeData()", 10000);


	bannerSliderInit();


	//调用瀑布流
	grid = new Masonry( gridDom, {
		columnWidth: '.grid-sizer',
		itemSelector: '.item',
		percentPosition: true
	});
	imagesLoaded( gridDom, function() {
		grid.layout();
	});
	getData();
}
//获取首页专题数据  type  1=首页轮播	2=icon固定推荐位	3=首页通栏自由推荐位	4=首页自由推荐位
function getSubjectData(type){
	api.ajax({
		url: BASE_URL + 'App/Special/specialLists',
		method: 'post',
		data: {
			values: {
				position: type
			}
		}
	},function(ret,err){
		if (ret && ret.code == 1 && ret.data.length ) {
			if(type == 1){	//1=首页轮播
				var tpl = $$('#slider_tpl').html();
				var tempFn = doT.template(tpl);
				$$('#mainImg .swiper-wrapper').html(tempFn(ret.data));
				api.parseTapmode();
				topSliderInit();
			}
			if(type == 2){	//1=icon固定推荐位
				var tpl = $$('#hotmap_tpl').html();
				var tempFn = doT.template(tpl);
				$$('#hotmap_html').html(tempFn(ret.data));
				api.parseTapmode();
			}
		}
	});
}
//顶部图片滑动
function topSliderInit(){
	if( $$('#mainImg .swiper-slide').length > 1 ){
		new Swiper('#mainImg',{
			speed: 600,
			autoplay: {
				delay: 5000,
				disableOnInteraction: false,
			},
			pagination: {
				el: '#mainImg .swiper-pagination',
			},
		})
	}
}
//banner图片滑动
function bannerSliderInit(){
	new Swiper('.bannerSlider',{
		speed: 600,
		slidesPerView :'auto',
		spaceBetween : 10,
		slidesOffsetBefore : 10,
		slidesOffsetAfter : 10
	})
}
//根据数量 设置一排显示4个还是5个
function checkHotMapLen(){
	$$('.hotMap').each(function(){
		var _this = $$(this);
		var len = _this.find('li').length;
		if(len > 5 && len < 9){
			_this.addClass('less');
		}else{
			_this.removeClass('less');
		}
	});
}
//获取滚动消息
function getNoticeData(){
    api.ajax({
        url: BASE_URL + 'App/Topic/realtimeMsg',
        method: 'get',
    },function(ret,err){
			// console.log(JSON.stringify(ret))
        if (ret && ret.code == 1 && ret.data.length) {
            $$('.notice').removeClass('aui-hide');
            var tpl = $$('#notice_tpl').html();
            var tempFn = doT.template(tpl);
            $$('#notice_html').html(tempFn(ret.data));
            setTimeout(function(){
                noticeInit();
            },30);
        }
    });
}
//提醒js
function noticeUp(){
	var noticeList = $$('#notice_html');
	var lastItem = noticeList.find('li:last-child');
	lastItem.addClass('scroll');
	lastItem.transitionEnd(function(){
		lastItem.removeClass('scroll');
		lastItem.prependTo(noticeList);
	});
}
function noticeInit(){
	clearInterval(isinerval);
	isinerval = setInterval("noticeUp()", 2000);
}

//今日精选
function getData(){
    isLoading = true;
	postData.pageNo = currentPage;
    api.ajax({
        url: BASE_URL_2 + 'App/Select/shopList',
        method: 'post',
        data: {
            values: postData
        }
    },function(ret,err){
			console.log(ret)
        if (ret) {
            if(ret.code == 1 && ret.data.length > 0){
                $$('.noData,.noMoreData').addClass('aui-hide');
                getFlow(ret.data);
                currentPage++;
                api.parseTapmode();
                //如果加载出来的数量 小于 pagesize 说明到底线了
                if(ret.data.length < postData.pageSize){
                    $$('.noMoreData').removeClass('aui-hide');
                    loadFlag = false;
                }
			}else{
				if(currentPage == 1){
                    $$('#flow_html').html('');
                    $$('.noMoreData').addClass('aui-hide');
                    $$('.noData').removeClass('aui-hide');
                }else{
                    $$('.noMoreData').removeClass('aui-hide');
                }
                loadFlag = false;
			}
        }
		isLoading = false;
    });
}
//瀑布流
function getFlow(flowData) {
	var tpl = $$('#flow_tpl').html();
	var tempFn = doT.template(tpl);
	var elem = $$(tempFn(flowData));
	if( currentPage==1 ){
		$$('#flow_html').html('<div class="grid-sizer"></div>');
	}
	$$(gridDom).append(elem);
	grid.appended(elem);
	imagesLoaded(gridDom, function() {
		grid.layout();
	});

	api.parseTapmode();
}

//打开产品列表
function openProductList(){
	api.openWin({
		name: 'product_list_win',
		url: 'best/product_list_win.html',
		bounces: false,
		pageParam: {
			key : 'value'
		}
	});
}
//打开专题
function openSubject(id){
	api.openWin({
		name: 'subject_win',
		url: 'best/subject_win.html',
		pageParam: {
			id: id
		}
	});
}

//打开大礼包首页
function openGift(){
	api.openWin({
		name: 'gift_index_win',
		url: 'giftBag/gift_index_win.html',
		pageParam: {
			type : 'gift'
		}
	});
}
//打开自营商品列表
function openSelf(){
	api.openWin({
		name: 'self_list_win',
		url: 'giftBag/self_list_win.html',
		pageParam: {
			type : 'self'
		}
	});
}
function testOpenDetail(el){
	var ind = $$(el).index();
	//var godId = Math.floor(Math.random()*10);
	var godId = $$('#flow_html .item').eq(ind).data('id');
	api.openWin({
		name: 'product_detail_win',
		url: 'widget://html/best/product_detail_win.html',
		pageParam: {
			shopId: godId
		}
	});
}
</script>
</html>
